<!-- src/views/warehousing/index.vue -->
<script setup>
import { ref } from 'vue';
import aaa from './aaa/aaa.vue';
import bbb from './bbb/bbb.vue';
import ccc from './ccc/ccc.vue';
import ddd from './ddd/ddd.vue';
import eee from './eee/eee.vue';
import fff from './fff/fff.vue';
import ggg from './ggg/ggg.vue';
import hhh from './hhh/hhh.vue';
import iii from './iii/iii.vue';

// 用于记录已激活的标签页
const activeTab = ref('0');

// 标签页切换时触发
const handleTabChange = (tabName) => {
  activeTab.value = tabName;
};
</script>

<template>
  <div class="outbound-container">
    <el-tabs 
      type="border-card" 
      class="outbound-tabs"
      v-model:active-name="activeTab"
      @tab-change="handleTabChange"
    >
      <el-tab-pane label="发货单" name="0">
        <aaa v-if="activeTab === '0'"></aaa>
      </el-tab-pane>
      
      <el-tab-pane label="预发货" name="1">
        <bbb v-if="activeTab === '1'"></bbb>
      </el-tab-pane>

      <el-tab-pane label="新发货" name="2">
        <ccc v-if="activeTab === '2'"></ccc>
      </el-tab-pane>
      
      <el-tab-pane label="待拣货" name="3">
        <ddd v-if="activeTab === '3'"></ddd>
      </el-tab-pane>

      <el-tab-pane label="已拣货" name="4">
        <eee v-if="activeTab === '4'"></eee>
      </el-tab-pane>

      <el-tab-pane label="打包" name="5">
        <fff v-if="activeTab === '5'"></fff>
      </el-tab-pane>

      <el-tab-pane label="称重" name="6">
        <ggg v-if="activeTab === '6'"></ggg>
      </el-tab-pane>

      <el-tab-pane label="出库" name="7">
        <hhh v-if="activeTab === '7'"></hhh>
      </el-tab-pane>

      <el-tab-pane label="已签收" name="8">
        <iii v-if="activeTab === '8'"></iii>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.outbound-container {
  height: calc(100vh - 84px);
  padding: 20px;
  background-color: #f0f0f0;
  box-sizing: border-box;
}

.outbound-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #d0d0d0;
  background-color: #fafafa;
}

.outbound-tabs :deep(.el-tabs__header) {
  margin-bottom: 0;
  border-bottom: 1px solid #d0d0d0;
}

.outbound-tabs :deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
}

.outbound-tabs :deep(.el-tabs__item) {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  transition: all 0.3s;
  height: 50px;
  line-height: 50px;
  background-color: #e8e8e8;
  border-right: 1px solid #d0d0d0;
}

.outbound-tabs :deep(.el-tabs__item:last-child) {
  border-right: none;
}

.outbound-tabs :deep(.el-tabs__item:hover) {
  color: #000000;
  background-color: #d8d8d8;
}

.outbound-tabs :deep(.el-tabs__item.is-active) {
  color: #000000;
  font-weight: 600;
  background-color: #c8c8c8;
}

.outbound-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background-color: #fafafa;
}

.outbound-tabs :deep(.el-tab-pane) {
  height: 100%;
  font-size: 14px;
  color: #303133;
}
</style>